<template>
  <div>
    <a-modal :width="500" title="绑定账号" v-model="visible" @ok="handleOk">
      <div class="wfull">
        <a-row class="mb10">
          <a-col :span="4">用户名</a-col>
          <a-col :span="20">
            <ZgInput placeholder="请输入用户名" v-model="username"></ZgInput>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="4">密码</a-col>
          <a-col :span="20">
            <ZgPassword placeholder="请输入密码" v-model="password"></ZgPassword>
          </a-col>
        </a-row>
      </div>
    </a-modal>
  </div>
</template>

<script>
import store from '@/store'
export default {
  data () {
    return {
      visible: false,
      accounts: this.$store.state.app.accounts,
      username: '',
      password: ''
    }
  },
  mounted () {
  },
  methods: {
    open () {
      this.visible = true
    },
    close () {
      this.visible = false
    },
    handleOk () {
      if (this.username.length === 0) {
        this.$warning({ title: '请输入用户名' })
        return
      }
      if (this.accounts.some(t => {
        return t.username === this.username
      })) {
        this.$warning({ title: '账号已绑定' })
        return
      }
      if (this.password.length === 0) {
        this.$warning({ title: '请输入密码' })
        return
      }
      const pwd = this.genPwd(this.password)
      this.$http.post('/zg-system/un/token/create', {
        username: this.username,
        password: pwd
      }, () => {
        this.accounts.push({
          username: this.username,
          password: pwd
        })
        store.commit('TOGGLE_ACCOUNTS', this.accounts)
        this.close()
      })
    }
  }
}
</script>
<style lang="less" scoped>
</style>
